<template>
  <div class="header-container">
    <div class="l-content">
      <el-button style="margin-right: 20px;" @click="handleMenu" icon="el-icon-menu" size="mini"></el-button>

      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <!-- :to="{ path: item.path }" -->
        <el-breadcrumb-item v-for="item in tags" :key="item.path">{{ item.label }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="r-content">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <img class="user" src="../assets/img.png" alt="">
        </span>
        <el-dropdown-menu slot="dropdown">
<!--          <el-dropdown-item>个人中心</el-dropdown-item>-->
          <el-dropdown-item command="cancel">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import Cookie from "js-cookie";

export default {
  name: 'CommonHeader',
  data() {
    return {}
  },
  methods: {
    handleMenu() {
      // console.log('点击了菜单')
      this.$store.commit('collapseMenu')
    },
    handleCommand(command) {
      if (command === 'cancel') {
        this.$confirm('您确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户确认退出
          Cookie.remove('token')
          this.$router.push('/login')
          this.$message({
            message: '退出成功!',
            type: 'warning'
          });
          //清楚user本地缓存
          localStorage.removeItem('user')
          //想清空vuex中的数据，让页面重新加载就行了
          window.location.reload()
        }).catch(() => {
          // 用户取消退出
        })
      }
    }
  },
  computed: {
    ...mapState({
      tags: state => state.tab.tabsList
    })
  },
  // mounted() {
  //   console.log(this.tags,'tags')
  // }
}
</script>
<style lang="less" scoped>
.header-container {
  padding: 0 20px;
  background-color: #ffffff;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

  .text {
    color: aliceblue;
    font-size: 14px;
    margin-left: 14px;
  }

  .r-content {
    .user {
      width: 44px;
      height: 44px;
      border-radius: 55%;
    }
  }

  .l-content {
    display: flex;
    align-items: center;

    /less/ .el-breadcrumb_item {
      .el-breadcrumb__inner {
        font-weight: normal;

        &.is-link {
          color: #d1d1d1;
        }
      }

      &.last-child {
        .el-breadcrumb__inner {
          color: #fff;
        }
      }
    }
  }
}
</style>